<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <link rel="stylesheet" type="text/css" href="../css/aui.2.0.css" />
    <link rel="stylesheet" type="text/css" href="../css/aui-pull-refresh.css" />
    <link rel="stylesheet" type="text/css" href="../css/font-awesome.min.css" />
    <style type="text/css">
        .aui-bg-info {
            margin-top:0px; 
            color:#fff; /*#283593*/
        }

        div.aui-bg-info {
            padding-top: 0.25rem;
            padding-bottom: 0.25rem;
            padding-left: 0.75rem;
            padding-right: 0.75rem;
        }

        .aui-list .aui-list-header {
            background-color: #eeeeee;
            color: #616161;
        }

        .aui-list:before,
        .aui-list:after {
            background-color: #eeeeee;
        }

        .loading {
            text-align: center;
            width: 40px;
            height: 20px;
            margin: 0 auto;
            margin-top:20px;
        }
        .loading span {
            display: inline-block;
            width: 4px;
            height: 100%;
            border-radius: 2px;
            background: lightgreen;
            -webkit-animation: load 1s ease infinite;
        }
        @-webkit-keyframes load {
            0%,100% {
                height: 20px;
                background: lightgreen;
            }
            50% {
                height: 35px;
                margin: -7px 0;
                background: lightblue;
            }
        } 
        .loading span:nth-child(2) {
            -webkit-animation-delay:0.2s;
        }
        .loading span:nth-child(3) {
            -webkit-animation-delay:0.4s;
        }
        .loading span:nth-child(4) {
            -webkit-animation-delay:0.6s;
        }
        .loading span:nth-child(5) {
            -webkit-animation-delay:0.8s;
        }

    </style>
</head>
<body>
    <header class="aui-bar aui-bar-nav" id="header" style="padding-top:20px; position:fixed;">
        <div class="aui-pull-left aui-padded-l-0" >
            <a class=" aui-btn aui-iconfont aui-icon-left" tapmode onclick="closeWin();"></a>
        </div>
        <div class="aui-title">搜索结果</div>
        <div class="aui-pull-right">
            <a class="aui-btn aui-iconfont aui-icon-refresh" href=""></a>
        </div>
    </header>
    <div id="header-bottom"></div>
    <section class="aui-content aui-refresh-content">
    <div class="aui-card-list">
        <div class="aui-bg-info">
            <div class="aui-row aui-margin-l-10">
                <div class="aui-col-xs-8">
                    <h1 class="aui-bg-info" id="id-sum-over-money">0.00</h1>
                    <p class="aui-font-size-12 aui-bg-info">&nbsp;￥剩余</p>
                </div>
                <div class="aui-col-xs-4">
                    <div class="aui-pull-right aui-padded-t-10 aui-padded-r-5">
                        <i class="fa fa-bar-chart" style="font-size: 1.25rem;"></i>
                    </div>
                </div>
            </div>
            <!-- <span class="aui-font-size-12" id="id-year">2016</span> -->
        </div>
        <div class="aui-bg-info">
            <div class="aui-row aui-margin-l-15">
                <div class="aui-col-xs-6">
                    <h3 class="aui-bg-info" id="id-sum-out-money">0.00</h3>
                    <p class="aui-font-size-12 aui-bg-info">￥支出</p>
                </div>
                <div class="aui-col-xs-6">
                    <h3 class="aui-bg-info" id="id-sum-in-money">0.00</h3>
                    <p class="aui-font-size-12 aui-bg-info">￥收入</p>
                </div>
            </div>
        </div>

        <div class="aui-card-list-content">
            <div class="aui-content" id="id-list-ul-none">
                <div class="aui-info aui-margin-t-15 aui-padded-l-10 aui-padded-r-10 aui-padded-b-15" onclick="goAddFrame();">
                    <div class="aui-info-item aui-font-size-14">
                        未搜索到记账结果...
                    </div>
                    <div class="aui-info-item aui-font-size-16 aui-text-warning">
                        记一笔&nbsp;<i class="aui-iconfont aui-icon-right"></i> 
                    </div>
                </div>
            </div>
            <div class="aui-content" id="id-list-ul">

            </div>
        </div>
    </div>

    <div class="loading" id="id-load-more" onclick="loadMore();" style="display:none;">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
    </div>
    </section>
</body>
<script type="text/javascript" src="../script/base64.js"></script>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/aui-toast.js" ></script>
<script type="text/javascript" src="../script/aui-scroll.js" ></script>
<script type="text/javascript" src="../script/aui-pull-refresh.js"></script>
<script type="text/javascript" src="../script/countUp.js"></script>
<script type="text/javascript">
    var uid = 0;
    var valPage = 1;
    var valPageMax = 1;
    var sumInMoney = 0;
    var sumOutMoney = 0;
    var numAnimOptions = {
      useEasing : true, 
      useGrouping : true, 
      separator : ' ', 
      decimal : '.', 
      prefix : '', 
      suffix : '' 
    };
    var toast = new auiToast();
    apiready = function(){
        api.parseTapmode();
        //不支持沉浸式效果
        if (!api.statusBarAppearance) {
            $api.byId('header').style.paddingTop = '1px';
        }
        //顶部导航栏高度抵消
        $api.byId('header-bottom').style.marginTop = $api.offset($api.byId('header')).h + 'px';

        //初始化页面
        initData(function(){});

        //数据刷新监听
        api.addEventListener({
            name: 'indexInitData'
        }, function(ret, err){
            if( ret ){
                //alert( JSON.stringify( ret ) );
                initData(function(){});
            }else{
                alert( JSON.stringify( err ) );
            }
        });
    };

    /** 下拉刷新 */
    var pullRefresh = new auiPullToRefresh({
        container: document.querySelector('.aui-refresh-content'),
        triggerDistance: 100
    },function(ret){
        if(ret.status=="success"){
            initData(function(){
                pullRefresh.cancelLoading(); //刷新成功后调用此方法隐藏
            });
        }
    });

    /** 初始化页面数据 */
    function initData(callback) {
        //显示加载动画
        toast.loading({
            title:"加载中",
            duration:2000
        });

        //关闭上拉监听
        valPage = 1;
        valPageMax = 1;

        //清空List列表
        $api.byId('id-list-ul').innerHTML = ''; 

        setTimeout(function(){
            //获取数据并显示
            showListData(valPage, function(ret){
                //隐藏加载框
                toast.hide();

                //全局变量初始化
                valPageMax = ret.pagemax;
                sumOutMoney = ret.SumOutMoney;
                sumInMoney = ret.SumInMoney;
                $api.byId('id-sum-in-money').innerHTML = '' + sumInMoney;
                $api.byId('id-sum-out-money').innerHTML = '' + sumOutMoney;

                //剩余金额动画(从0到剩余金额,保留2位小数,0.8秒动画)
                var overMoney = sumInMoney - sumOutMoney;
                var numAnim = new CountUp("id-sum-over-money", 0, overMoney, 2, 0.8, numAnimOptions);
                numAnim.start();

                //显示加载更多按钮
                if (valPageMax > 1) {
                    $api.byId('id-load-more').style.display = "block";
                }

                //回调显示数据完成
                callback();
            });
        }, 200);
    }

    /** 显示页面数据 */
    function showListData(p, callback) {
        //整理Api参数
        var dataParam = api.pageParam;
        dataParam.page = p;
        var jsonData = {};
        jsonData.type = 'find';
        jsonData.data = BASE64.encoder(JSON.stringify(dataParam));

        //获取数据并处理
        getData(jsonData, function(ret){
            //alert( JSON.stringify( ret ) );
            var ListUl = $api.byId('id-list-ul');
            var ListData = ret.data;
            var arrClass = $api.getStorage('allClass');
            var inMoney = 0.00;
            var outMoney = 0.00;
            var overMoney = 0.00;

            for (var i = 0; i < ListData.length; i++) {
                $api.byId('id-list-ul-none').innerHTML = '';
                var strID = 'id-ul-' + ListData[i].actime + '';
                if (!$api.byId(strID)) {
                    html = '<ul class="aui-list aui-media-list" id="'+ strID +'">'+
                        '<li class="aui-list-header">'+
                            '<div class="aui-row">'+
                                '<div class="aui-col-xs-4">'+ ListData[i].actime +'</div>'+
                            '</div>'+
                        '</li></ul>';
                    ListUl.insertAdjacentHTML('beforeEnd', html);
                    inMoney = 0.00;
                    outMoney = 0.00;
                    overMoney = 0.00;
                }
                
                if (ListData[i].zhifu == 1) {
                    var ListImage = 'in';
                } else {
                    var ListImage = 'out';
                }

                html = '<li class="aui-list-item aui-list-item-middle">'+
                        '<div class="aui-media-list-item-inner" onclick="goEditData('+ ListData[i].acid +');">'+
                            '<div class="aui-list-item-media" style="width: 3rem;">'+
                                '<img src="../image/icon_'+ListImage+'.png" class="aui-img-round aui-list-img-sm">'+
                            '</div>'+
                            '<div class="aui-list-item-inner aui-list-item-arrow">'+
                                '<div class="aui-list-item-text">'+
                                    '<div class="aui-list-item-title">'+
                                        '<p class="aui-font-size-18">'+arrClass[ListData[i].acclassid]+'</p>'+
                                        '<p class="aui-font-size-12">备注：'+ListData[i].acremark+'</p>'+
                                    '</div>'+
                                    '<div class="aui-list-item-right aui-font-size-16">￥'+ListData[i].acmoney+'</div>'+
                                '</div>'+
                            '</div>'+
                        '</div>'+
                    '</li>';
                $api.byId(strID).insertAdjacentHTML('beforeEnd', html);
            }
            callback(ret);
        });
    }

    /** 获取主页数据 */
    function getData(jsonData, callback) {
        api.ajax({
            url: 'http://qxu1192050221.my3w.com/xxjzApp/index.php/Home/Api/account',
            method: 'get',
            data: {
                values: jsonData
            }
        },function(ret, err){
            if (ret) {
                // alert( JSON.stringify( ret ) );
                if (ret['uid'] > 0) {
                    uid = ret['uid'];
                    callback(ret['data']['msg']);
                } else {
                    api.alert({
                        title: '重新登录',
                        msg: '登录验证已过期，请重新登录。',
                    }, function(ret, err){
                        goLogout();
                    });
                }
            } else {
                alert( JSON.stringify( err ) );
            }
        });
    }


    /** 上拉加载 */
    var scroll = new auiScroll({
        listen:true, //是否监听滚动高度，开启后将实时返回滚动高度
        distance:200 //判断到达底部的距离，isToBottom为true
    },function(ret){
        if (ret.isToBottom) {
            if (valPage < valPageMax) {
                loadMore();
            }
        }
    });

    /** 加载更多 */
    function loadMore() {
        if (valPage >= valPageMax) {
            location.reload(); //刷新页面
        } else {
            //获取下一页数据
            valPage = valPage + 1;
            showListData(valPage, function(ret){
                //隐藏加载框
                toast.hide();

                //隐藏加载更多按钮
                if (ret.pagemax == valPage) {
                    $api.byId('id-load-more').style.display = "none";
                }
            });
        }
    }

    /** 跳转到编辑页 */
    function goEditData(id) {
        api.sendEvent({
            name: 'editWin',
            extra: {
                name: 'edit_win', 
                id: id,
                uid: uid
            }
        });
    }

    /** 跳转到记账页面 */
    function goAddFrame() {
        api.sendEvent({
            name: 'indexFrame',
            extra: {
                name: 'add_frm',
                index: '2'
            }
        });
    }

    /** 退出登录 */
    function goLogout() {
        api.sendEvent({
            name: 'xxjzLogout',
            extra: {
                value: 'xxjzLogout'
            }
        });
    }

    /** 返回命令 */
    function closeWin() {
        api.closeWin({
        });
    }
        
</script>
</html>
</html>